<template>
  <div class="wrapper">
    <div
      class="menuItem"
      draggable
      v-for="(item,index) in menus"
      :key="index"
      :data-type="item.type"
      :data-name="item.name"
      @dragstart="dragStart"
    >{{item.name}}</div>
  </div>
</template>
<script>
import menus from "./menuList";
export default {
    name: "leftView",
    data() {
        return {
            menus: menus,
        };
    },
    methods: {
        dragStart(e) {
            let info = {
                name: e.target.getAttribute("data-name"),
                type: e.target.getAttribute("data-type"),
            };
            e.dataTransfer.setData("info", JSON.stringify(info));
        },
    },
};
</script>

<style scoped lang="less">
.wrapper {
    width: 243px;
    padding: 8px;
    .menuItem {
        background-color: #eee;
        width: 100px;
        height: 100px;
        float: left;
        margin: 10px;
        text-align: center;
        line-height: 100px;
        cursor: pointer;
    }
}
</style>